<template>
    <div>
        <h1>待办事项</h1>
        <div class="common-layout">
            <el-container>
                <el-header><SonHeader @add="addHandle"/></el-header>
                <el-main><SonMain :list="list" @changeD="changeHandle" @del="delHandle"/></el-main>
                <el-footer><SonFooter :list="list" @show="showHandle"/></el-footer>
            </el-container>
        </div>
    </div>
  </template>

  <script>
import SonFooter from '@/components/ToDo/SonFooter.vue';
import SonHeader from '@/components/ToDo/SonHeader.vue';
import SonMain from '@/components/ToDo/SonMain.vue';

  export default {
    components:{
      SonHeader,
      SonMain,
      SonFooter,
    },
    created() {
      this.copyList=this.list.slice() //创建一个中间数组，用来处理一些过程数据的转换
    },//生命周期钩子函数，表示页面在创建时将执行的代码
    data() {
      return {
        list:[
          {
            id: '001',
            content: '完成第一章学习44444',
            startDate: '2024.10.29',
            finishDate:'',
            state:false
          },{
            id: '002',
            content: '完成第二章学习',
            startDate: '2024.10.29',
            finishDate:'',
            state:false
          },
        ],
        now:new Date(),
        copyList:[]
      }
    },
    methods: {
      addHandle(val){
        //通过数组方法push，把数据插入到数组的末尾
        this.list.push({id:+new Date(),
                        content:val,
                        startDate:this.fomateDate,
                        finishDate:'',
                        state:false
        })
        this.copyList=this.list.slice() //当数组发生更改的时候，中间数组也需要同步进行更改，下面方法同理
      },
      changeHandle(i){
        this.list[i].finishDate=this.fomateDate
        this.copyList=this.list.slice()
      },
      delHandle(i){
        //删除传递过来的下标所对应的行
        this.list.splice(i,1)
        this.copyList=this.list.slice()
      },
      showHandle(v){
        if(v=='all'){
          this.list=this.copyList.slice()
        }else if(v=='done'){
          this.list=this.copyList.filter(v=>v.state==true)//过滤方法，把符合要求的数据筛选出来
        }else if(v=='undo'){
          this.list=this.copyList.filter(v=>v.state==false)//过滤方法，把符合要求的数据筛选出来
        }else{
          this.list=[],
          this.copyList=[]
        }
      }
    },
    computed:{
      fomateDate(){
        let month=this.now.getMonth()+1
        return this.now.getFullYear()+'-'+month+'-'+this.now.getDate()
      }
    }
  }
  </script>

<style>
/* scoped 限制当前的样式只作用在当前页面，否则，如果有相同的样式名，将会影响其他页面 */
#app{
    width: 800px;
    /* 居中 */
    margin: auto;
}
</style>
  